---
import type { Props } from '@astrojs/starlight/props';
import Button from '../Button.astro';
import FacePile from './Hero/FacePile.astro';

const { hero } = Astro.props.entry.data;
const { title, tagline, actions, facepile } = hero!;
---

<div class="hero">
	<div class="grid-bg"></div>
	<div id="_top" class="hero-content stack" style="--stack-gap: 2rem;">
		<div class="stack" style="--stack-gap: 1rem;">
			<h1 set:html={title} />
			<p set:html={tagline} />
		</div>
		<div class="sl-flex actions">
			{
				actions.map(({ link, icon, text, variant }) => (
					<Button {link} {variant} {icon} set:html={text} />
				))
			}
		</div>
	</div>
	<FacePile {...facepile} />
</div>

<style>
	.hero {
		position: relative;
		margin: -1.5rem calc(-1 * var(--sl-content-pad-x));
	}

	.grid-bg {
		z-index: -1;
		position: absolute;
		content: '';
		inset: 0;
		background-image: linear-gradient(to right, var(--sl-color-white) 1px, transparent 1px),
			linear-gradient(to bottom, var(--sl-color-white) 1px, transparent 1px);
		background-position: right -1px;
		background-size: 23px 23px;
		-webkit-mask-image: radial-gradient(circle at 100% 0%, white, transparent 65%);
		mask-image: radial-gradient(circle at 100% 0%, white, transparent 65%);
		opacity: 0.05;
	}

	.stack {
		display: flex;
		flex-direction: column;
		gap: var(--stack-gap, 1.5rem);
	}

	.hero-content {
		padding: 3rem var(--sl-content-pad-x);
		text-align: center;
	}

	h1 {
		font-size: var(--sl-text-5xl);
		line-height: var(--sl-line-height-headings);
		font-weight: 600;
		color: var(--sl-color-white);
	}
	.actions {
		flex-wrap: wrap;
		gap: 1rem 2rem;
		justify-content: center;
	}

	:global([data-has-hero] .main-pane) {
		--sl-content-margin-inline: 0;
		width: 100%;
	}

	@media (min-width: 32rem) {
		.hero-content {
			max-width: 36rem;
			padding-block: 6rem;
		}

		h1 {
			font-size: var(--sl-text-6xl);
		}
	}

	:global([data-has-hero] .sl-container) {
		max-width: 100%;
	}

	.hero-content,
	:global([data-has-hero] .sl-markdown-content) {
		max-width: 72rem;
		margin-inline: auto;
	}

	@media (min-width: 78rem) {
		:global([data-has-hero] .main-pane) {
			/* Red gradient calculated on the basis of the face pile grid, but set here so it’s under the grid background image. */
			--cell-size: 3.5rem;
			background:
				radial-gradient(var(--sl-color-purple-low), transparent 40%) no-repeat -170vw -55vh / 250vw
					250vh,
				radial-gradient(closest-side, var(--sl-color-red-low), transparent) no-repeat
					calc(100% + var(--cell-size) * 6) calc(var(--cell-size) * -7) /
					calc(var(--cell-size) * 12) calc(var(--cell-size) * 19);
		}

		.hero {
			display: grid;
		}
		.hero > :global(*) {
			/* Position all elements in the hero on top of each other in the same grid area. */
			grid-area: 1 / 1 / -1 / -1;
		}

		.hero-content {
			width: 100%;
			text-align: start;
			align-self: center;
		}
		.hero-content > * {
			/* Limit the content width so it doesn’t overlap with facepile elements. */
			max-width: calc(100% - 29rem);
		}

		.actions {
			justify-content: start;
		}
	}
</style>
